<template>
  <div style="margin-top: 10px; margin-bottom: 60px" class="box">
    <!-- 语种 -->
    <div class="top">
      <div class="title">语种:</div>
      <el-tabs v-model="area" @tab-click="getArtistTop()">
        <el-tab-pane label="全部" name="-1"></el-tab-pane>
        <el-tab-pane label="华语" name="7"></el-tab-pane>
        <el-tab-pane label="欧美" name="96"></el-tab-pane>
        <el-tab-pane label="日本" name="8"></el-tab-pane>
        <el-tab-pane label="韩国" name="16"></el-tab-pane>
        <el-tab-pane label="其他" name="0"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 歌手分类 -->
    <div class="center">
      <div class="title">分类:</div>
      <el-tabs v-model="type" @tab-click="getArtistTop()">
        <el-tab-pane label="全部" name="-1"></el-tab-pane>
        <el-tab-pane label="男歌手" name="1"></el-tab-pane>
        <el-tab-pane label="女歌手" name="2"></el-tab-pane>
        <el-tab-pane label="乐队" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 筛选 -->
    <div class="select">
      <div style="
          width: 79px;
          margin-top: 27px;
          color: #ec4141;
          margin-right: 10px;
        ">
        筛选:
      </div>
      <div class="btn">
        <div class="word">
          <div v-for="(item, i) in word" :key="i" :class="i === checkId ? 'checkBox' : 'wordBox'" @click="check(i)">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <!-- 展示歌手-->
    <div class="content" style="overflow: auto">
      <div v-for="(item, i) in ArtistData" :key="i" class="contentBox infinite-list-item">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <el-image :src="item.picUrl" @click="getItem(item.id)" lazy>
            <div slot="placeholder" class="image-slot">
              <el-image @click="getItem(item.id)" :src="require('../assets/image/hot50.jpg')" fit="cover" lazy>
              </el-image>
            </div>
          </el-image>
          <div style="padding: 14px">
            <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
              <div class="desc">
                {{ item.name }}
              </div>
            </el-tooltip>
          </div>
        </el-card>
      </div>
    </div>
    <div class="more" @click="load()" v-if="more === true">
      查看更多歌手 <i class="el-icon-arrow-down"></i>
    </div>
    <div class="loading" v-if="loading === true">
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
import debounce from "@/utils/debounce.js";
export default {
  mounted() {
    this.getArtist();
  },
  data() {
    //     type 取值:
    //      -1:全部
    //      1:男歌手
    //      2:女歌手
    //      3:乐队

    //      area 取值:
    //      -1:全部
    //       7华语
    //       96欧美
    //       8:日本
    //       16韩国
    //       0:其他
    return {
      type: '-1',
      area: '-1', // 语种
      limit: 30, // 单页数量
      offset: 0, // 页数
      initial: '', // 按首字母索引查找参数
      word: [
        '热门',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'N',
        'M',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        '#',
      ],
      checkId: 0,
      ArtistData: [],
      more: true,
      number: 1,
      loading: false,
      timer: null,
    };
  },

  beforeRouteLeave(to, from, next) {
    this.ArtistData = []
    this.loading = true
    next()
  },

  methods: {
    // 无限滚动
    load: debounce(function () {
      if (this.more === true) {
        this.loading = true;
        this.number += 1;
        this.offset = this.number * 30;
        this.getArtist()
      }
    }, 1000),

    getArtistTop() {
      this.offset = 0;
      this.ArtistData = [];
      this.getArtist()
    },

    // 获取普通歌手榜
    getArtist: debounce(function () {
      this.loading = true;
      this.$api
        .arList({
          type: parseInt(this.type),
          area: parseInt(this.area),
          limit: this.limit,
          offset: this.offset,
          initial: this.initial,
          cookie: localStorage.getItem('cookie'),
        })
        .then((ret) => {
          this.more = ret.more;
          ret.artists.map((item) => {
            this.ArtistData.push({
              id: item.id,
              picUrl: item.picUrl,
              name: item.name,
            });
          });
          this.more = ret.more;
          this.loading = false;
        });
    }, 1000),


    // 首字母筛选
    check(e) {
      this.offset = 0;
      this.checkId = e;
      this.initial = this.word[e];
      if (this.word[e] === '热门') {
        this.initial = '-1';
      } else if (this.word[e] === '#') {
        this.initial = '0';
      } else {
        this.initial = this.word[e];
      }
      this.ArtistData = [];
      this.getArtist();
    },
    // 跳转到歌手详情
    getItem(e) {
      this.loading = true;
      window.sessionStorage.setItem('artists', e);
      this.$router.push(`/artistsPage?id=${e}`);
    },
  },
};
</script>

<style scoped>
.top,
.center,
.btn {
  display: flex;
  align-items: center;
  color: #ec4141;
}

.content {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  position: relative;
}

.btn {
  margin-top: 20px;
}

.more {
  margin-top: 20px;
  cursor: pointer;
  text-align: center;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contentBox {
  margin-right: 10px;
}

.title {
  margin-right: 15px;
}

.word {
  display: flex;
  flex-wrap: wrap;
}

.wordBox,
.checkBox {
  width: 80px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  cursor: pointer;
  color: black;
}

.checkBox {
  color: #ec4141;
  background: #fef5f5;
}

.select {
  display: flex;
}

.el-card {
  margin-bottom: 10px;
  cursor: pointer;
  width: 200px;
  position: relative;
}

.el-image {
  width: 100%;
  height: 162px;
}

.desc {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body::-webkit-scrollbar {
  display: none;
}

ul::-webkit-scrollbar {
  display: none;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.el-icon-loading {
  position: fixed;
  font-size: 50px;
  left: 50%;
  top: 50%;
  color: #ec4141;
}
</style>
